<template>
  <div id="lotteryActivity">
    <h1 class="con-right-title">活动列表</h1>
    <topSearch @toSearch="toSearch"></topSearch>
    <div class="table-conBtn">
      <el-button type="warning" icon="el-icon-plus" @click="addEditCopy('add')">
        新增活动
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <el-table :data="tableData" max-height="550">
      <el-table-column type="index" label="序号" width="50" align="center">
      </el-table-column>
      <el-table-column
        prop="activityName"
        label="活动名称"
        min-width="80"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="inviteMatchingChannel.oneLevelChannelName"
        label="展翅一级入量渠道"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="inviteMatchingChannel.twoLevelChannelName"
        label="展翅二级入量渠道"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column label="状态" min-width="80" align="center">
        <template slot-scope="{ row }">
          <span v-if="row.activityStatus == 'NOT_STARTED'">未开始</span>
          <span v-if="row.activityStatus == 'ONGOING'">进行中</span>
          <span v-if="row.activityStatus == 'OVER'">已结束</span>
        </template>
      </el-table-column>
      <el-table-column label="活动时间" min-width="70" align="center">
        <template slot-scope="{ row }">
          <div>{{ row.activityStartTime }}至</div>
          <div>{{ row.activityEndTime }}</div>
        </template>
      </el-table-column>
      <el-table-column label="活动海报" min-width="100" align="center">
        <template slot-scope="{ row }">
          <listImgString :imgInfo="row.activityPoster"></listImgString>
        </template>
      </el-table-column>
      <el-table-column
        prop="operatorUser.trueName"
        label="操作人"
        min-width="50"
        align="center"
      >
      </el-table-column>
      <el-table-column label="操作" min-width="100" align="center">
        <template slot-scope="{ row }">
          <el-button
            type="text"
            v-if="row.activityStatus === 'NOT_STARTED'"
            @click="startEndDel('start', row)"
          >
            开始
          </el-button>
          <el-button
            type="text"
            v-if="row.activityStatus !== 'OVER'"
            @click="addEditCopy('edit', row)"
          >
            编辑
          </el-button>
          <el-button
            type="text"
            v-if="row.activityStatus === 'NOT_STARTED'"
            @click="startEndDel('del', row)"
          >
            删除
          </el-button>
          <el-button
            type="text"
            v-if="row.activityStatus === 'ONGOING'"
            @click="startEndDel('end', row)"
          >
            结束
          </el-button>
          <el-button
            type="text"
            v-if="row.activityStatus === 'ONGOING'"
            @click="promote(row)"
          >
            推广
          </el-button>
          <el-button type="text" @click="addEditCopy('copy', row)">
            一键复制
          </el-button>
          <el-button
            type="text"
            v-if="row.activityStatus !== 'NOT_STARTED'"
            @click="viewsData(row)"
          >
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <promotion v-if="dialogData.isShow" :dialogData="dialogData"></promotion>
  </div>
</template>
<script>
import {
  endPoster,
  deletePoster,
  startPoster,
  getPostActiveList
} from '@/api/activityCenter/activityManage/collectPraise'
import topSearch from './topSearch'
import listImgString from '@common/listImgString'
import promotion from '../common/promotion'
export default {
  components: { topSearch, listImgString, promotion },
  data() {
    return {
      total: 0,
      tableData: [],
      dialogData: { isShow: false },
      searchParams: { pageNum: 1, pageSize: 10 }
    }
  },
  mounted() {
    this.searchList()
  },
  methods: {
    /* 列表 */
    searchList() {
      getPostActiveList(this.searchParams, (res) => {
        this.tableData = res.rows
        this.total = res.total
      })
    },
    /* 搜索 */
    toSearch(val) {
      this.searchParams.pageNum = 1
      Object.assign(this.searchParams, val)
      this.searchList()
    },
    /* 新增  编辑  复制 */
    addEditCopy(type, row) {
      let obj = { name: 'wh:collectPraise:edit', query: { type } }
      if (type !== 'add') {
        obj.query.id = row.activityId
      }
      this.$router.push(obj)
    },
    /* 开始  结束  删除 */
    startEndDel(status, row) {
      switch (status) {
        case 'start':
          startPoster(row.activityId, () => {
            this.$message.success('开始成功')
            this.searchList()
          })
          break
        case 'end':
          endPoster(row.activityId, () => {
            this.$message.success('结束成功')
            this.searchList()
          })
          break
        case 'del':
          this.$confirm('是否删除该活动?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              deletePoster(row.activityId, () => {
                this.$message.success('删除成功')
                this.searchList()
              })
            })
            .catch(() => {})
          break
      }
    },
    /* 推广 */
    promote(row) {
      this.dialogData = { isShow: true, url: row.activityUrl }
    },
    /* 查看数据 */
    viewsData(row) {
      const obj = {
        activityId: row.activityId,
        activityName: row.activityName,
        activityStartTime: row.activityStartTime,
        activityEndTime: row.activityEndTime,
        oneLevelChannelName: row.inviteMatchingChannel.oneLevelChannelName,
        twoLevelChannelName: row.inviteMatchingChannel.twoLevelChannelName
      }
      this.$router.push({
        name: 'wh:collectPraise:detail',
        query: { viewData: JSON.stringify(obj) }
      })
    }
  }
}
</script>
<style lang="less" scoped></style>
